<!--图片上密封点信息添加-->
<template>
	<view>
		<view class="check-content">
			<!-- 	<view  class="pointer-name">密封点名称</view> -->
			<uni-forms ref="form" size="mini" :model="formData" :rules="rules">
				<view class=""
					style="width: 100%!important;display: flex;justify-content: space-between;flex-wrap: wrap;">
					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="标志号" :label-width="70" name="pointFlag"
							:rules="[{required: false,errorMessage: '请输入密封点标志号'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="formData.pointFlag" :maxlength="50"
									style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
									placeholder="请输入" />
							</view>
						</uni-forms-item>
					</view>

					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="物料名称" :label-width="70" name="materialName"
							:rules="[{required: false,errorMessage: '请输入物料名称'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="formData.materialName" :maxlength="50"
									style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
									placeholder="请输入" />
							</view>
						</uni-forms-item>
					</view>


					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="物料温度" :label-width="70" name="materialTemp"
							:rules="[{required: false,errorMessage: '请输入物料温度'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="formData.materialTemp" :maxlength="50"
									style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
									placeholder="请输入" />
							</view>
						</uni-forms-item>
					</view>



					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="泄露阈值" :label-width="70" name="leakMax"
							:rules="[{required: false,errorMessage: '请输入泄露阈值'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="formData.leakMax" :maxlength="50"
									style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
									placeholder="请输入" />
							</view>
						</uni-forms-item>
					</view>
				</view>

				<uni-forms-item label="组件类型" :label-width="70" name="type ">
					<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.type "
						mode="selector" title="请选择组件类型"  @change="selectTypeChage"
						:dataList="componentType"></hpy-form-select>
				</uni-forms-item>

				<uni-forms-item label="是否自定义尺寸" :label-width="110" name="content">
					<view style="padding-top:10rpx">
						<radio-group v-model="sizeType" @change="sizeTypeChagne">
							<label>
								<radio :value="'1'" />是
								<radio :value="'0'" checked="checked" />否
							</label>
						</radio-group>
					</view>

				</uni-forms-item>

				<uni-forms-item label="尺寸大小" :label-width="70" name="pipe" v-if="sizeType == '0'">
					<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.pipe"
						mode="selector" title="请选择尺寸大小"  @change="selectSizeChange"
						:dataList="sizeTypeList"></hpy-form-select>
				</uni-forms-item>

				<uni-forms-item label="自定义尺寸" :label-width="90" name="pipe" v-if="sizeType == '1'">
					<view style="width: 100%!important;">
						<input v-model="formData.pipe" :maxlength="100"
							style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
							placeholder="请输入" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="是否保温" :label-width="70" name="isHeatPreserve">
					<view style="width: 100%!important;">
						<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.isHeatPreserve"
							mode="selector" title="请是否保温"  @change="selectIsHeatPreserveChange"
							:dataList="heatPreservationFlag"></hpy-form-select>
					</view>
				</uni-forms-item>
				<uni-forms-item label="状态" :label-width="70" name="materialStatus">
					<view style="width: 100%!important;">
						<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.materialStatus"
							mode="selector" title="请选择状态"  @change="selectStatusChange"
							:dataList="statusTypeList"></hpy-form-select>
					</view>
				</uni-forms-item>
				<uni-forms-item label="是否可测" :label-width="70" name="isExam">
					<view style="width: 100%!important;">
						<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.isExam"
							mode="selector" title="请选择是否可测"  @change="selectExamChange"
							:dataList="testFlagList"></hpy-form-select>
					</view>
				</uni-forms-item>
				<uni-forms-item label="是否可达" :label-width="70" name="isArrive">
					<view style="width: 100%!important;">
						<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.isArrive"
							mode="selector" title="请选择是否可达"  @change="selectArriveChange"
							:dataList="accessibleList"></hpy-form-select>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="check-button">
			<button type="primary" class="mini-btn" @tap="submitData">确定</button>
		</view>

	</view>

</template>

<script setup>
	import {
		ref,
		computed,
		 onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	// import Head from '@/components/head/head.vue'
	
    import bus from '@/utils/bus';
	import SliderBar from './sliderBar.vue'
	import {pointType,materialStatus } from '@/api/deviceTest.js';
	const sizeType = ref(0)
	const formData = ref({
		pointFlag:'',
		materialName:'',
		leakMax:'',
		materialStatus:'',
		materialTemp:'',
		isHeatPreserve :'',
		isArrive :'',
		isExam :'',
		type:'',
		pipe:'',
		typeCode:''
	})
	const directionList = ref([]);
	const componentType = ref([{
			value: "阀门",
			text: "阀门",
			code:"V"
		}, {
			value: "法兰",
			text: "法兰",
			code:"F"
		},
		{
			value: "连接件",
			text: "连接件",
			code:"C"
		}, {
			value: "泵",
			text: "泵",
			code:"P"
		},
		{
			value: "开口阀或开口管线",
			text: "开口阀或开口管线",
			code:"O"
		}, {
			value: "搅拌器",
			text: "搅拌器",
			code:"A"
		},
		{
			value: "压缩机",
			text: "压缩机",
			code:"Y"
		}, {
			value: "泄压设备",
			text: "泄压设备",
			code:"R"
		},
		{
			value: "取样连接系统",
			text: "取样连接系统",
			code:"S"
		}, {
			value: "其他",
			text: "其他",
			code:"Q"
		},
	]);
	const sizeTypeList = ref([{
			value: "15",
			text: "15"
		},  {
			value: "25",
			text: "25"
		},
		{
			value: "50",
			text: "50"
		}, {
			value: "80",
			text: "80"
		},
		{
			value: "100",
			text: "100"
		}, {
			value: "150",
			text: "150"
		},
		{
			value: "200",
			text: "200"
		}, {
			value: "250",
			text: "250"
		},
		{
			value: "300",
			text: "300"
		}, {
			value: "500",
			text: "500"
		},
		{
			value: "800",
			text: "800"
		},
		{
			value: "1000",
			text: "1000"
		},
		{
			value: "1500",
			text: "1500"
		},
		{
			value: "其他",
			text: "其他"
		},
	]);
    const heatPreservationFlag = ref([{
    		value: "是",
    		text: "是"
    	}, {
    		value: "否",
    		text: "否"
    	}])
	const statusTypeList = ref([{
    		value: "轻液体",
    		text: "轻液体",
    	}, {
    		value: "气体",
    		text: "气体"
    	}])
	const testFlagList = ref([{
    		value: "是",
    		text: "是"
    	}, {
    		value: "否",
    		text: "否"
    	}])
	const accessibleList = ref([{
    		value: "是",
    		text: "是"
    	}, {
    		value: "否",
    		text: "否"
    	}])
	const detecionPointData = ref({})
	
	function dateFormat(date, format) {
		format = format || 'yyyy-MM-dd hh:mm:ss';
		if (date !== 'Invalid Date') {
			let o = {
				'M+': date.getMonth() + 1, //month
				'd+': date.getDate(), //day
				'H+': date.getHours(), //hour
				'm+': date.getMinutes(), //minute
				's+': date.getSeconds(), //second
				'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
				S: date.getMilliseconds(), //millisecond
			};
			if (/(y+)/.test(format))
				format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
			for (let k in o)
				if (new RegExp('(' + k + ')').test(format))
					format = format.replace(
						RegExp.$1,
						RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
					);
			return format;
		}
		return '';
	}

    

	
    onLoad((option) => {
		//let formDataTemp = JSON.parse(option.info);
		//console.log("iiiiiii",formDataTemp);
		//detecionPointData.value = formDataTemp;
    });
	// 确认选择回调
	const handShowDateConfirm = (e) => {
		showDateStyler.value = false
		formData.value.inspectDate = e
		console.log('回调时间===>', e)
	}

	// 取消选择回调
	const handShowDateCancel = () => {
		showDateStyler.value = false
		console.log('取消===>')
	}








	const handleDictData = (list, key, dictKey) => {
		let arr = []
		list.map(v => {
			let item = {
				text: v.dictValue,
				value: v.dictKey
			};
			if (formData.value[key] == v.dictKey) {
				formData.value[dictKey] = item;
			}
			arr.push(item)
		})
		return arr;
	}


	const form = ref(null)

	const imgList = ref([])

	const deleteFileFn = (info) => {
		const idx = info.index == 0 ? 0 : info.index + 1;
		imgList.value.splice(idx);
		// formData.value.attachList.splice(idx);
		console.log('delete==')
	}
	//切换尺寸输入方式

	const sizeTypeChagne = (e) => {
		//console.log("sizeTypeChagnesizeTypeChagne",formData.value.sizeType);
		//console.log("sizeTypeChagnesizeTypeChagne1",e.detail.value);
		sizeType.value = e.detail.value;
		//console.log("sizeTypeChagnesizeTypeChagne2",formData.value.sizeType);
	}
	
	const selectTypeChage = (e) =>{
		//console.log("ttttttt",e.value.code);
		formData.value.typeCode = e.value.code;
		formData.value.type = e.value.value;
	}
	const selectSizeChange = (e) =>{
		formData.value.pipe = e.value.value;
	}
	
	const selectIsHeatPreserveChange = (e) =>{
		formData.value.isHeatPreserve = e.value.value;
	}
	
	const selectStatusChange = (e) =>{
		formData.value.materialStatus = e.value.value;
	}
	
	const selectExamChange = (e) =>{
		formData.value.isExam = e.value.value;
	}
	
	const selectArriveChange = (e) =>{
		formData.value.isArrive = e.value.value;
	}
	
	// 提交
	const submitData = () => {
		form.value.validate().then(res => {
			//console.log("formData",JSON.parse(JSON.stringify(formData.value)));
			let markPointerList = [];
			markPointerList.push(JSON.parse(JSON.stringify(formData.value)));
			//detecionPointData.value.pointList = markPointerList;
			//返回拍照页面打点
			//console.log("detecionPointData.value",detecionPointData.value);
			 bus.emit("pointInfo",JSON.parse(JSON.stringify(formData.value)));
		}).catch(err => {
			console.log('表单错误信息：', err);
		})

	}

	const doSubmit = () => {
		
		
		// const userInfo = uni.getStorageSync('userInfo') || {};
		// formData.value.createUser = userInfo.userId
		// formData.value.reportUser = userInfo.name
		// formData.value.problemImgAttachList = imgList.value;
		// let arr = []

		// imgList.value.forEach(item => {
		// 	arr.push(item.attachId)
		// })

		// formData.value.problemImgAttachIds = arr.toString()


		// if (formData.value.inspectDate == '') {
		// 	formData.value.inspectDate = dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
		// }
		// let params = JSON.parse(JSON.stringify(formData.value));

		// console.log('params', params)
		// submitPatrol(formData.value).then(res => {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: "提交成功！"
		// 	})
		// 	setTimeout(function() {
		// 		uni.navigateBack()
		// 	}, 1000)
		// })
	}
	const select = (e) => {
		let that = this
		uni.showLoading({
			title: "图片上传中"
		});
		const tempFilePaths = e.tempFilePaths;
		for (var i in tempFilePaths) { //多文件
			uni.uploadFile({
				// url: '/app/blade-resource/oss/endpoint/put-file-attach', //上传接口
				url: '/app/blade-resource/oss/endpoint/put-file-without-login', //上传接口
				filePath: tempFilePaths[i],
				name: 'file',
				header: {
					Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
					'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
				},
				success: (uploadFileRes) => {
					uni.hideLoading();
					try {
						const back = JSON.parse(uploadFileRes.data);
						// if (uploadFileRes.statusCode == 200) {
						// 	that.infos.pathList.push(back.data);
						// } else {
						// 	uni.showToast(back.msg)
						// }
						// for (const item of back.data) {
						back.data['id'] = back.data.attachId
						imgList.value.push(back.data)
						console.log('上传成功', imgList)
						// formData.value.attachList.push(back.data);
					} catch (e) {}
					// }
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast("图片上传失败，请联系开发！")
				},
				complete: function() {
					uni.hideLoading();
				}
			});
		}

	}

	// 获取上传进度
	const progress = (e) => {
		console.log('上传进度：', e)
	}

	// 上传成功
	const success = (e) => {
		console.log('上传成功')
	}

	// 上传失败
	const fail = (e) => {
		console.log('上传失败：', e)
	}
	//距离变化函数
	const change = () => {
	}
	 //获取密封点类型
	 // pointType().then(res => {
	 // 	console.log("pointType",res);
	 // })
	 //获取物料状态
	 // materialStatus().then(res => {
	 // 	console.log("materialStatus",res);
	 // })
</script>

<style lang="scss" scoped>
	.select-item {
		width: 100rpx !important;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		max-width: 100%;
	}

	.check-content {
		// height: calc(100vh - 330rpx);
		overflow: auto;
		margin: 26rpx 31rpx 0;
		padding: 26rpx 26rpx 80rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 10rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 5rpx;
	}

	.check-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 25rpx 82rpx;
		background: white;
		z-index: 2;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: rgba(255, 255, 255, 0.6);

		uni-button {
			line-height: 80rpx !important;
			font-size: 26rpx;
		}
	}

	.item-inline {
		display: flex;
		margin-bottom: 22px;

		view:nth-child(1) {
			font-size: 14px;
			color: #606266;
			min-width: 80px;
		}

	}

	.pointer-name {
		//padding-left:20rpx;
		margin-bottom: 20rpx;
		//border-bottom: solid 1rpx  #606266 ;
		font-weight: bold;
		color: #606266;
	}

	uni-input {
		font-size: 12px !important;
	}

	uni-textarea {
		height: 100rpx;
		font-size: 12px !important;
	}
</style>
<style lang="scss">
	.check-content {
		.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
			background: linear-gradient(0deg, #455BDF 0%, #5970FA 100%);
			width: 21%;
			height: 80rpx;
			text-align: center;

			.checklist-text {
				color: #fff;
			}
		}

		.uni-data-checklist .checklist-group .checklist-box.is--tag {
			width: 21%;
			height: 80rpx;
			background: #FFFFFF;
			border: 1rpx solid #455BDF;
			border-radius: 10rpx;
		}

		.uni-data-checklist .checklist-group .checklist-box .checklist-content {
			justify-content: center;
		}

		.uni-data-checklist .checklist-group .checklist-box.is--tag .checklist-text {
			color: #455BDF;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
		}

		.uni-forms-item__label {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #1B1D20;
			padding: 0px !important;
		}

		.uni-textarea-textarea {
			font-size: 28rpx;
		}

		.uni-forms-item .is-required {
			margin-right: 10rpx;
		}
	}

	.item-inline {
		// flex-direction: row !important;
		align-items: center !important;

		.uni-forms-item__label {
			flex-basis: 200px !important;
			// min-width: 200px !important;
		}

		.uni-forms-item__content {
			padding-left: 20px;
		}
	}

	.img-list {
		margin: 1%;
		width: 30%;
		height: 28%;
		padding-top: 30%;
		border: 3rpx solid rgb(238, 238, 238);
	}
</style>